<template>
    <!--小可详情-->
  <div class="detailsbox">
    <div class="detailsboxtop">
      <img class="banner" :src="URL + details.banner" alt="">
      <div>
        <h3>{{details.bookname}}</h3>
        <p>{{details.contentsummary}}</p>
      </div>
    </div>

    <div>
      <mu-tabs :value.sync="active1" inverse color="secondary" text-color="rgba(0, 0, 0, .54)"  center>
        <mu-tab>详情</mu-tab>
        <mu-tab>目录</mu-tab>
      </mu-tabs>
      <div class="demo-text" v-if="active1 === 0">
        <img class="smallLessonImg" :src="URL + details.smallLessonImg" alt="">
        <comment></comment>
      </div>
      <div class="demo-text" v-if="active1 === 1">
        <ul>
          <li v-for="item in details.chapterList">
            <h3><img src="" alt="">{{item.chaptername}}</h3>
            <p>{{item.chapterduration}}</p>
          </li>
        </ul>
      </div>
    </div>


  </div>
</template>

<script>
  import comment from "@/components/comment";
    export default {
        name: "soursedetails",
    data(){
          return{
            active1:0,//tab默认值
            details:[],//详情
          }
      },
      components:{
        comment
      },
      mounted(){
        let  date = new Date().getTime() //获取当前时间戳
        var obj ={bookid :this.$route.params.id,channel:'weixin',timestamp:date,token :0}
        var sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
        var url = 'https://testapi.readerday.com/v3/product/book/detail/0/'+sign +'/' + date +'/'+ this.$route.params.id + '/weixin'

        this.$axios.get(url)
          .then((res)=>{
            this.details=[]
            this.details=res.data.data
            console.log(this.details)
          })
      },
      methods:{

      }
    }
</script>

<style scoped>
.detailsbox{
  background: #eee;
  height: 100%;
  overflow: auto;
}
.detailsboxtop{
  margin-bottom: .1rem;
  background: #fff;
  text-align: left;

}
.detailsboxtop h3{
  font-size: .16rem;
  font-weight: 600;
  line-height: .35rem;
  padding-left: .1rem;
}
.detailsboxtop p{
  font-size: .13rem;
  line-height: .3rem;
  padding-left: .1rem;
  color: #999;
}
.banner{
  width: 100%;
  height: 1.5rem;
}
  .smallLessonImg{
    width: 100%;
  }
  .demo-text li{
    text-align: left;
    background: #fff;
    height: .7rem;
    padding: 0 .1rem;
  }
.demo-text li p{
margin-left: .4rem;
  font-size: .12rem;
}
.demo-text li h3{
  font-size: .15rem;
  font-weight: 600;
  line-height: .32rem;

}
.demo-text h3> img{
  float: left;
  width: .3rem;
  height: .3rem;
  margin-right: .1rem;
}
</style>
